<template>
  <div>
      <!-- <h3>面板 宝爸宝妈   区域面板划分</h3> -->
      <!-- 1.面板组件 -->
      <mt-tab-container v-model="active">
      <!-- 四个子面板组件 -->
      <mt-tab-container-item id="message">
        <!-- 引入主页面板组件 -->
        <messagelist></messagelist>
      </mt-tab-container-item>
      <mt-tab-container-item id="contact">
        <!-- 育儿宝库模块 -->
        <yuer></yuer>
      </mt-tab-container-item>
      <mt-tab-container-item id="find">
        <!-- 消息模块 -->
        <message></message>
      </mt-tab-container-item>
      <mt-tab-container-item id="me">
        <!-- 个人中心模块 -->
        <grzx></grzx>
      </mt-tab-container-item>
      </mt-tab-container>
      <!-- 底部导航条 -->
      <mt-tabbar v-model="active" fixed>
       <!--第一个按钮 主页--->
       <!--@click.native=""-->
       <mt-tab-item id="message"  @click.native="changeState(0)">
         <tabbaricon
          :selectedImage="require('../assets/bb1.png')"
          :normalImage="require('../assets/bb.png')"
          :focused="currentIndex[0].isSelect"
         ></tabbaricon>
          <!--按钮状态保存数组下标0属性中-->
          亲宝宝
       </mt-tab-item>
       <!--第二个按钮 育儿宝库模块-->
       <mt-tab-item id="contact" @click.native="changeState(1)">
<tabbaricon
          :selectedImage="require('../assets/ax1.png')"
          :normalImage="require('../assets/ax.png')"
          :focused="currentIndex[1].isSelect"
         ></tabbaricon>         
         育儿
       </mt-tab-item>
       <!--第三个按钮 消息模块-->
       <mt-tab-item id="find" @click.native="changeState(2)">
<tabbaricon
          :selectedImage="require('../assets/xx1.png')"
          :normalImage="require('../assets/xx.png')"
          :focused="currentIndex[2].isSelect"
         ></tabbaricon>         
           消息
       </mt-tab-item>
       <!--第四个按钮 个人中心模块-->
       <mt-tab-item id="me" @click.native="changeState(3)">
<tabbaricon
          :selectedImage="require('../assets/wd1.png')"
          :normalImage="require('../assets/wd.png')"
          :focused="currentIndex[3].isSelect"
         ></tabbaricon>         
           我的
       </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
//引入tab 底下导航栏的切换
import TabBarIcon from "./TabBarIcon.vue"
//引入主页面板内容
import MessageList from "./MessageList.vue"
//引入育儿面板内容
import Yuer from "./Yuer.vue"
//引入消息面板内容
import Message from "./Message.vue"
//引入个人中心面板内容
import Grzx from "./Grzx.vue"

export default {
   data(){
     return {
       //active保存字符串 子面板id
       //第一个子面板  message
       //第二个子面板  cart
       active:"message",
       //在data添加属性 currentIndex
       //集中保存所有按钮状态
     currentIndex:[
       {isSelect:true}, //0保存第一个按钮状态
       {isSelect:false},//1保存第二个按钮状态
       {isSelect:false},//2保存第三个按钮状态
       {isSelect:false} //3保存第四个按钮状态
       ]
     }
   },//<!--2:注册TitleBar-->
   methods:{
     changeState(idx){
       //功能:指定当前按钮状态修改true
       //    其它按钮状态修改    false
       //1:创建循环遍历状态数组
       for(var i=0;i<this.currentIndex.length;i++){
        //2:获取用户点击下标
        var ui = idx;
        //  与当前数据元素下标比较
        //3:如果两个值相等当前状态true
        if(ui==i){
          this.currentIndex[i].isSelect=true;
        }else{
         //4:其它元素状态false
         this.currentIndex[i].isSelect=false;
        }
          
       }
     }
   },
   components:{
    //注册底部导航图片子组件
     "tabbaricon":TabBarIcon,
    //注册消息列表子组件
     "messagelist":MessageList,
    //注册育儿组件
    "yuer":Yuer,
    //注册消息组件
    "message":Message,
    //注册个人中心组件
    "grzx":Grzx
   }
}
</script>

<style scoped>
.mint-tabbar > .mint-tab-item.is-selected{color:#fc6d8b;}
</style>